body {
  margin: 0;
  padding: 0;
}
.flexWrap {
  display: flex;
  flex-direction: column;
}
.horizontalMain {
  display: flex;
  flex-flow: row nowrap;
  flex: 1 1;
  overflow: hidden;
  height: 100%;
  .verticalMain{
    flex-shrink: 1;
  }
}

.verticalMain {
  display: flex;
  flex-flow: column nowrap;
  flex: 1 1;
  overflow: hidden;
  height: 100%;
  .horizontalMain {
      flex-shrink: 1;
  }
}

.content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  overflow-y: auto;
  //background-color: #ddd;
}

.contWrap {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  overflow-y: auto;
  height: 100%;
}
:global {
  .cont {
    height: 100%;
    overflow: hidden;
  }
  .vertical {
    transition: height .5s;
    overflow: hidden;
    opacity: 1;
    flex-shrink: 0;
  }
  .horizontal {
    position: relative;
    transition: width .5s;
    width: 200px; /*这个定宽最好与main/index.js中MenuBar组件的width属性的值一致，有定值时收缩时才会有过度动画 */
    flex-shrink: 0;
  }
  .hHide {
    width: 60px;
    .cont {
      overflow: visible;
    }
  }
  .toggle-wrap {
    position: absolute;
    z-index: 20;
    overflow: hidden;
    border-radius: 50%;
    box-shadow: 0 0 10px 0 #333;
  }
}
